<template>
	<div class="yh_content">

		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
			<div>
				<div class="block yh_dis" style="margin-top: 10px">
					<div style="margin-left: 10px">
						<div class="hei20 yh_qs yh_font13">会员</div>
						<el-input v-model="input" size="small" placeholder="姓名/手机号" />
					</div>
					<div style="margin-left:5px">
						<div class="hei20 yh_qs yh_font13">会员生日</div>
						<el-date-picker v-model="search.birthday_start" style="width: 140px" size="small" type="date"
							placeholder="开始时间" />
						<el-date-picker v-model="search.birthday_end" style="width: 140px; margin-left: 5px"
							size="small" type="date" placeholder="截至日期" />
					</div>
					<div style="margin-left:5px">
						<div class="hei20 yh_qs yh_font13">入会时间</div>
						<el-date-picker v-model="search.birthday_start" style="width: 140px" size="small" type="date"
							placeholder="开始时间" />
						<el-date-picker v-model="search.birthday_end" style="width: 140px; margin-left: 5px"
							size="small" type="date" placeholder="截至日期" />
					</div>

					<div style="margin-left: 10px">
						<el-button type="primary" class="mar-top20 bac6b7" size="small">搜索</el-button>
					</div>
				</div>
			</div>
			<div>
				<!-- <el-button type="primary" style="margin-top: 18px" @click="addmember">新增会员</el-button>
        <el-button type="primary" style="margin-top: 18px">批量操作</el-button> -->
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table :data="tableData" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column prop="name" label="姓名" />
				<el-table-column prop="name" label="性别" />
				<el-table-column prop="name" label="生日" />
				<el-table-column prop="name" label="入会时间" />
				<el-table-column prop="name" label="主会员" />
				<el-table-column prop="name" label="主会员手机号" />
				<el-table-column :label="$t('table.actions')" align="center" width="280"
					class-name="small-padding fixed-width">
					<template :slot-scope="{ row, $index }">
						<div class="yh_dis">
							<div class="yh_dis" style="align-items: center; margin-right: 10px">
								<i class="el-icon-bank-card" style="color: #6b7cdd; font-size: 20px" />发卡
							</div>
							<div class="yh_dis" style="align-items: center; margin-right: 10px">
								<i class="el-icon-bank-card" style="color: #6b7cdd; font-size: 20px" />发体验卡
							</div>
							<div class="yh_dis" style="align-items: center; margin-right: 10px">
								<i class="el-icon-document" style="color: #6b7cdd; font-size: 20px" />详情
							</div>
							<div class="yh_dis" style="align-items: center; margin-right: 10px">
								<i class="el-icon-delete" style="color: #6b7cdd; font-size: 20px" />删除
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="yh_dis yh_disJuc" style="align-items: center; margin-top: 20px">
				<div>共0条记录，每页15条</div>
				<el-pagination :current-page.sync="listQuery.page" :page-size="15" layout="prev, pager, next, jumper"
					:total="listQuery.limit" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getList,
	} from '@/api/member'
	export default {
		name: 'ArticleList',
		components: {},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: false,
				search: {
					birthday_start: '', // 生日开始时间
					birthday_end: '' // 生日结束时间
				},

				tableData: [],
				listQuery: {
					page: 1,
					limit: 0
				}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '会员',
				url: '/member/memberlist',
				// ident: 'memberlist',
				// pd: false,
				pd: true
			}, {
				name: '家庭成员',
				url: '/member/familys',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 1
			})
			// this.getList();
		},
		methods: {
			// getList() {
			//   this.listLoading = true;
			//   fetchList(this.listQuery).then((response) => {
			//     this.list = response.data.items;
			//     this.total = response.data.total;
			//     this.listLoading = false;
			//   });
			// },
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}
</style>